import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { v4 as uuidv4 } from 'uuid';
@Component({
  selector: 'app-g2-bar',
  templateUrl: './g2-bar.component.html',
  styleUrls: ['./g2-bar.component.scss']
})
export class G2BarComponent implements OnInit, OnChanges {
  @Input() data = null;
  id = uuidv4();
  charts = null;
  constructor() { }

  ngOnInit() {
  }
  configureChart(charts) {
    // if (this.charts) {
    //   this.charts.destory();
    // }
    this.charts = charts;
    this.charts.data(this.data);
    this.charts.scale('value', {
      nice: true,
    });

    this.charts.tooltip({
      showMarkers: false
    });
    this.charts.interaction('active-region');

    this.charts.interval().position('name*value').size(26);

    this.charts.render();
  }
  ngOnChanges() {
    if (this.charts) {
      this.charts.changeData(this.data);
      this.charts.render();
    }
  }
}
